<template>
  <div class="">
    <ul>
      <li v-for="(item, index) in $store.state.list" :key="item.id">
        {{ item.name }} <span @click="remove(index)">x</span>
      </li>
    </ul>
    <sum></sum>
  </div>
</template>

<script>
import sum from "../components/sum.vue";
export default {
  data() {
    return {};
  },
  mounted() {
    this.$axios.get("list.json").then((res) => {
      this.$store.commit("setlist", res.data.list);
    });
  },
  methods: {
    remove(index) {
      this.$store.commit("remove", index);
    },
  },
  components: {
    sum,
  },
};
</script>

<style lang="scss"></style>
